<template>
	<view style="height:100vh;background-color: #f4f6f9;">
		<layout>
			<view class="page-container">
				
				<view class="card-list">
					<a-spin :spinning="spinning" />
					<view v-for="(item, index) in data" :key="index" class="card-item-container">
						<view class="card">
							<view class="card-header">
								<text class="card-title">{{ item.title }}</text>
								<view class="status-container">
									<text class="status">{{ item.extra }}</text>
								</view>
							</view>
							<view class="card-content">
								<view class="card-info">
									<text><strong>出库单号:</strong> {{ item.outboundOrder }}</text>
								</view>
								<view class="card-footer">
									<text><strong>客户:</strong> {{ item.customerName }}</text>
									<text><strong>操作员:</strong> {{ item.operator }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</layout>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		auditOutWarehouseApply,
		getOutWarehouseApply,
		listOutWarehouseApply4Audit
	} from "@/api/wmsApply/outWarehouseApply";
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	const spinning=ref(true);
	// 模拟数据
	const data = ref([]);
	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			
			return null;
		}
	}
	async function getList() {
		try {
			const ref = await listOutWarehouseApply4Audit({
				pageNum: 1,
				pageSize: 100,
				applyStatus:2
			});
			console.log(ref)

			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const applyStatus = await getDictVaule("apply_status", item.applyStatus); // 等待 getDictVaule 完成
				const sup = await getQuery("query_supplier", item.supplierId); // 等待 getDictVaule 完成
				const admin = await getQuery("query_user", item.applyUser); // 等待 getQueryDa
				const applyType = await getDictVaule("wms_apply_type", item.bizType); // 等待 getDictVaule 完成


				let a = {
					title: '订单详情 ' + item.id,
					extra: applyStatus,
					outboundOrder: item.serialNo,
					customerName: sup,
					operator: admin,
					timestamp: item.applyTime,
				};

				d.push(a);
			}
			console.log(d);
			data.value = d;
			spinning.value=false;
		} catch (error) {
			
		}
	}
	getList();
</script>

<style scoped>
	/* 主容器样式 */
	.main-container {
		min-height: 100vh;
		padding: 24rpx;
		background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
	}

	/* 卡片容器样式 */
	.application-cards {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(380rpx, 1fr));
		gap: 24rpx;
		margin-top: 20rpx;
	}

	/* 卡片样式 */
	.application-card {
		background: linear-gradient(145deg, #ffffff, #f9fafb);
		border-radius: 16rpx;
		border: 1px solid rgba(39, 174, 96, 0.1);
		box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.1);
		overflow: hidden;
		transition: all 0.3s ease;
		position: relative;
		animation: cardFadeIn 0.4s ease-out forwards;
		opacity: 0;
	}

	/* 为不同卡片添加延迟动画 */
	.application-card:nth-child(1) { animation-delay: 0.05s; }
	.application-card:nth-child(2) { animation-delay: 0.1s; }
	.application-card:nth-child(3) { animation-delay: 0.15s; }
	.application-card:nth-child(4) { animation-delay: 0.2s; }
	.application-card:nth-child(5) { animation-delay: 0.25s; }
	.application-card:nth-child(6) { animation-delay: 0.3s; }
	.application-card:nth-child(7) { animation-delay: 0.35s; }
	.application-card:nth-child(8) { animation-delay: 0.4s; }

	.application-card:hover {
		transform: translateY(-6rpx);
		box-shadow: 0 12rpx 30rpx rgba(39, 174, 96, 0.15);
	}

	/* 卡片头部 */
	.card-header {
		padding: 20rpx 24rpx;
		background: linear-gradient(90deg, rgba(39, 174, 96, 0.08), rgba(46, 204, 113, 0.04));
		border-bottom: 1px solid rgba(39, 174, 96, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-title {
		font-size: 32rpx;
		color: #2c3e50;
		font-weight: 600;
		display: flex;
		align-items: center;
	}

	.card-title::before {
		content: '';
		display: inline-block;
		width: 8rpx;
		height: 32rpx;
		background-color: #27ae60;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.card-status {
		font-size: 24rpx;
		color: #ffffff;
		padding: 4rpx 20rpx;
		border-radius: 30rpx;
		background-color: #27ae60;
		font-weight: 500;
	}

	.status-pending {
		background-color: #f39c12;
	}

	.status-approved {
		background-color: #27ae60;
	}

	.status-rejected {
		background-color: #e74c3c;
	}

	/* 卡片内容 */
	.card-body {
		padding: 24rpx;
	}

	.info-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.info-item {
		font-size: 28rpx;
		color: #4a6572;
		display: flex;
		align-items: center;
	}

	.info-item:nth-child(1),
	.info-item:nth-child(2) {
		grid-column: span 2;
	}

	.info-label {
		font-weight: 500;
		margin-right: 16rpx;
		color: #2c3e50;
	}

	.info-value {
		flex: 1;
	}

	.highlighted {
		color: #27ae60;
		font-weight: 600;
	}

	/* 卡片底部操作区 */
	.card-footer {
		display: flex;
		justify-content: flex-end;
		padding: 16rpx 24rpx;
		border-top: 1px solid rgba(39, 174, 96, 0.1);
		background-color: rgba(39, 174, 96, 0.02);
	}

	/* 按钮样式 */
	:deep(.el-button) {
		border-radius: 8rpx !important;
		transition: all 0.3s ease;
	}

	:deep(.el-button--primary) {
		background-color: #27ae60 !important;
		border-color: #27ae60 !important;
		box-shadow: 0 4rpx 8rpx rgba(39, 174, 96, 0.2);
	}

	:deep(.el-button--primary:hover) {
		background-color: #219654 !important;
		transform: translateY(-2rpx);
	}

	:deep(.el-button--default) {
		border-color: #d1d9e6 !important;
		color: #4a6572 !important;
	}

	:deep(.el-button--default:hover) {
		border-color: #27ae60 !important;
		color: #27ae60 !important;
	}

	/* 响应式调整 */
	@media (max-width: 767px) {
		.application-cards {
			grid-template-columns: 1fr;
		}
		
		.info-row {
			grid-template-columns: 1fr;
		}
		
		.info-item:nth-child(1),
		.info-item:nth-child(2) {
			grid-column: auto;
		}
	}

	/* 动画效果 */
	@keyframes cardFadeIn {
		from { opacity: 0; transform: translateY(20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}
</style>